<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>订单展示</title>
    <link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
    <%--    <link rel="stylesheet" type="text/css" href="./css/style.css" />--%>
    <script src="../layui/layui.js"></script>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin" style="height: 40px;">
    <div style="height: 50px; width: 100% ; background-color: #f2f2f2" class="layui-logo layui-header">历史订单</div>
</div>
<%-------------------------------订单详情弹窗--------------------------------%>

<table class="layui-hide" id="test" lay-filter="test" style="padding-top: 100px"></table>
<script type="text/html" id="barDemo">
    {{#
    var fn = function(rdate,count,a,b,status){
    let dates = rdate.split("-");
    var rzdate = (new Date()).setFullYear(Number(dates[0]),Number(dates[1])-1,Number(dates[2]));

    var now = new Date();
    var nowTime = now.getTime();
    if(rzdate > nowTime){
    if(status==10){
    return '<a class="layui-btn layui-btn-disabled layui-btn-xs">已取消</a>';
    }
    return '<a class="layui-btn layui-btn-disabled layui-btn-xs">未处理</a>'+'<a class="layui-btn layui-btn-xs" lay-event="del">取消</a>';
    }else {
    if(count>a){
    if(a>b){
    return '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="dingdan">详情</a>';
    }else if(a==b){
    if(a==0){
    if(status==10){
    return '<a class="layui-btn layui-btn-disabled layui-btn-xs">已取消</a>';
    }
    return '<a class="layui-btn layui-btn-xs" lay-event="del">取消</a>';
    }else{
    if(status==10){
    return '<a class="layui-btn layui-btn-disabled layui-btn-xs">已取消</a>'+'<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="dingdan">详情</a>';
    }
    return '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="dingdan">详情</a>'+'<a class="layui-btn layui-btn-xs" lay-event="del">取消</a>';
    }
    }
    }else if(count==a){
    return '<a class="layui-btn layui-btn-disabled layui-btn-xs">已分完</a>'+'<a class="layui-btn layui-btn-danger layui-btn-xs"
                                                                              lay-event="dingdan">详情</a>';
    }else{
    return '<span>'+a+' '+count+' '+b+'</span>';
    }
    }
    };
    }}
    {{ fn(d.rzdate,d.count,d.a,d.b,d.status) }}
</script>

<div id="tuifang" style="display: none">
    <form class="layui-form" action="" lay-filter="tuifanginfo">
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">入住详情号</label>
            <div class="layui-input-inline">
                <input type="text" name="ruzhuid" required autocomplete="off"
                       class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单号</label>
            <div class="layui-input-inline">
                <input type="text" name="orderid" required autocomplete="off"
                       class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">退宿时间</label>
            <div class="layui-input-inline">
                <input type="text" name="outdate" required autocomplete="off"
                       class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">退还金额/元</label>
            <div class="layui-input-inline">
                <input type="text" name="tsmoney" required autocomplete="off"
                       class="layui-input" disabled>
                <input type="hidden" name="money" required autocomplete="off"
                       class="layui-input" disabled>
                <input type="hidden" name="count" required autocomplete="off"
                       class="layui-input" value="0" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">退还押金/元</label>
            <div class="layui-input-inline">
                <input type="text" name="tsyj" required autocomplete="off"
                       class="layui-input" disabled value="0">
            </div>
        </div>
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">经办人</label>
            <div class="layui-input-inline">
                <input type="hidden" name="tsjbr" required autocomplete="off"
                       class="layui-input" value="${sessionScope.id}" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-inline">
                <input type="text" name="comm" required autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="tfForm">退房</button>
            </div>
        </div>
    </form>
</div>

<%--// 根据订单号查询对应的订单所对应的所有的入住详情--%>
<div id="roomdetails" style="display: none"></div>

<script id="demo" type="text/html">
    <div class="container">
        <div class="layui-row">
            {{# layui.each(d.list, function(index, item){ }}
            <div class="layui-col-md4">
                <div class="rooms">
                    <form class="layui-form" style="padding-top:20px" >
                        <div class="layui-form-item">
                            <label class="layui-form-label">订单号</label>
                            <div class="layui-input-inline">
                                <input type="text"  name="orderid" value="{{ item.orderid }}" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">房间编号</label>
                            <div class="layui-input-inline">
                                <input type="text"  name="roomcode" value="{{ item.roomcode }}" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="uname" value="{{ item.uname }}" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">电话</label>
                            <div class="layui-input-inline">
                                <input type="text" name="tel" value="{{ item.tel }}" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">入住时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="indate" value="{{ item.indate }}" class="layui-input" disabled>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">离开时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="leavedate"  class="layui-input" value="{{ item.leavedate }}" disabled>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            {{# }); }}
        </div>
    </div>
</script>

<script>
    layui.use(['table','form','jquery','layer','laytpl'], function(){
        var table = layui.table;
        var form=layui.form;
        var $=layui.jquery;
        var layer=layui.layer;
        var laytpl = layui.laytpl;

        let typeInfo;
        $(function () {
            $.ajax({
                url: "${pageContext.request.contextPath}/order/roomtype",
                type: "POST",
                data: {},
                dataType: "JSON",
                success: function (res) {
                    typeInfo = res;
                }
            })
            showTable();
        })

        function showTable() {
            // 获取所有待入住的房间信息 根据房间类型
            table.render({
                elem: '#test' //id为test的table
                , limit: 5
                , limits: [5, 10, 15]
                ,cellMinWidth: 100
                , request: {
                    pageName: 'curr' //页码的参数名称，默认：curr
                    , limitName: 'nums' //每页数据量的参数名，默认：nums
                }
                ,url:'${pageContext.request.contextPath}/DingDan/query'  //url 查询数据   所有的客户的数据
                // , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , title: '订单表'
                , cols: [[
                    {field: 'id', title: 'ID', fixed: 'left', sort: true}
                    , {field: 'name', title: '姓名'}
                    , {field: 'tel', title: '电话',width: 130}
                    , {
                        field: 'roomtype', title: '房间类型' , templet: function (res) {
                            // 循环获得到 房间类型所对应的房间类型名
                            let name = "";
                            $.each(typeInfo, function (index, item) {
                                if (res.roomtype == item.id) {
                                    name = item.name;
                                    return;
                                }
                            })
                            return name;
                        }
                    }
                    , {field: 'count', title: '房间数量',width: 80}
                    , {field: 'rzdate', title: '入住时间',width: 130}
                    , {field: 'leavedate', title: '离店时间',width: 130}
                    , {field: 'price', title: '总价/元'}
                    , {field: 'createtime', title: '创建时间',width: 130}
                    , {field: 'a', title: '入住记录'}
                    , {field: 'b', title: '退房记录'}
                    , {
                        field: 'status', title: '状态', templet: function (res) {
                            switch (res.status) {
                                case 0:
                                    return "已付款";
                                case 1:
                                    return "正在入住中";
                                case 2:
                                    return "已退房";
                                case 10:
                                    return "已取消"; // 退订单
                                case 4:
                                    return "超时未退房";
                            }
                        }
                    }
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo',width: 203}
                ]]
                , page: true
                , done: function(res, curr, count){
                    $("[data-field='a']").css('display','none');
                    $("[data-field='b']").css('display','none');
                }
            });
        }
       // 监听行工具事件
        table.on('tool(test)', function(obj){
            var datas = obj.data; //一行的数据
            if(obj.event === 'dingdan'){
                let detals = "";
                $.ajax({
                    url:'${pageContext.request.contextPath}/DingDan/qqq',
                    data:{id:obj.data.id},
                    dataType:'JSON',
                    async:false,
                    success:function (text){
                        detals = text;
                    }
                })

                var data = { //数据
                    "title": "客房"
                    , "list": detals
                }
                var getTpl = demo.innerHTML;
                var view = document.getElementById('roomdetails');
                laytpl(getTpl).render(data, function (html) {
                    view.innerHTML = html;
                });


                var index = layer.open({
                    title: '入住详情展示',
                    type: 1,
                    content: $("#roomdetails"),
                    area: ['320px', '195px'],
                    maxmin: true
                });
                layer.full(index);
            }else if (obj.event === 'del') {
                layer.confirm('您确定要取消订单吗？', {
                    btn: ['是','否'] //按钮
                }, function(){
                    // 获取当前 数据
                    let typeinfo = "";
                    $.ajax({
                        url: "${pageContext.request.contextPath}/type",
                        dataType: "JSON",
                        data: {method:'show',id:datas.roomtype},
                        async: false,
                        success: function (rinfo) {
                            typeinfo = rinfo;
                        }
                    });


                    let symoney = datas.price;
                    let now = new Date();
                    // 先判断是否为入住时间 再判断是否大于当前时间 (new Date()).toLocaleDateString().replaceAll("/", "-")
                    let dates = datas.rzdate.split("-");
                    var s = (new Date()).setFullYear(Number(dates[0]), Number(dates[1]) - 1, Number(dates[2]));
                    let datetime = (new Date()).toLocaleDateString().replaceAll("/", "-");
                    if (now.getTime()>s) {
                        let nhour = now.getHours();
                        let sy = setValueforDate(datetime,datas.leavedate);
                        if (nhour > 17) {
                            if(sy!=0){
                                symoney = (sy - 1) * typeinfo.money*(Number(datas.count)-Number(datas.a));
                            }else {
                                symoney = 0;
                            }
                        } else {
                            symoney = sy * typeinfo.money;
                        }
                    }


                    form.val("tuifanginfo", {
                        'orderid': datas.id,
                        'tsmoney': symoney,
                        'outdate': datetime,
                        'count':(Number(datas.count)-Number(datas.a)),
                        'money':typeinfo.money
                    });
                    layer.open({
                        title: '退房记录',
                        type: 1,
                        content: $("#tuifang"),
                        area: ['400px', '400px']
                    });
                }, function(){
                    layer.msg('操作取消');
                });

            }

        });
        form.on('submit(tfForm)', function (data) {
            $.ajax({
                url: "${pageContext.request.contextPath}/tfang/append",
                type: "POST",
                dataType: "JSON",
                data: data.field,
                async: false,
                success: function (text) {
                    layer.msg("hello world");
                    layer.closeAll();
                    table.reload('test', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    }); //只重载数据
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });

    function setValueforDate(start,end) {
        let datem = start.split("-");
        var s = (new Date()).setFullYear(Number(datem[0]), Number(datem[1]) - 1, Number(datem[2]));

        let daten = end.split("-");
        var e = (new Date()).setFullYear(Number(daten[0]), Number(daten[1]) - 1, Number(daten[2]));

        //计算两个时间间隔天数
        if (s > e) {
            var t = s;
            s = e;
            e = t;
        }
        let d = (Number(e) - Number(s)) / (1000 * 60 * 60 * 24);
        return d;
    }
</script>

</body>
</html>
